$(function () {
  var agencyChangeChart = echarts.init(document.getElementById('agencyChangeChart'))
  var agencyIllegalChart = echarts.init(document.getElementById('agencyIllegalChart'))

  var agencyChangeMock = [
    [158, 180],
    [58, 120],
    [180, 125],
    [112, 158]
  ]
  drawAgencyChangeChart(agencyChangeChart, agencyChangeMock)

  var agencyIllegalMock = [{
    value: 10,
    name: '导游辱骂游客'
  }, {
    value: 120,
    name: '价格欺诈'
  }, {
    value: 70,
    name: '态度不好'
  }, {
    value: 60,
    name: '误导游客'
  }, {
    value: 40,
    name: '其他'
  }, {
    value: 58,
    name: '虚假宣传'
  }]
  drawAgencyIllegalChart(agencyIllegalChart, agencyIllegalMock)

  function createItemStyle(color) {
    return {
      normal: {
        color: color
      }
    }
  }

  function drawAgencyChangeChart(chart, data) {

    var label = {
      normal: {
        show: true,
        position: 'right',
        formatter: '{a}'
      }
    }

    var firstHalfData = []
    var secondHalfData = []
    _.each(data, function (item, index) {
      firstHalfData.push({
        value: item[0],
        itemStyle: createItemStyle('rgba(55,201,54,0.6)')
      })
      secondHalfData.push({
        value: item[1],
        itemStyle: createItemStyle('rgba(55,201,54,0.6)')
      })
    })
    var option = option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      textStyle: {
        color: '#DBDAEA',
        fontSize: 12
      },
      grid: {
        top: '10%',
        left: '0%',
        right: '10%',
        bottom: '0%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        splitNumber: 4,
        splitLine: {
          lineStyle: {
            color: 'rgba(0,255,255,0.2)'
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        }
      },
      yAxis: {
        type: 'category',
        data: ['2014年', '2015年', '2016年', '2017年'],
        axisTick: {
          show: false
        },
        axisLabel: {
          margin: 20
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(0,255,255,0.2)'
          }
        }
      },
      series: [{
        name: '上半年',
        type: 'bar',
        data: firstHalfData,
        barWidth: '30%',
        label: label
      }, {
        name: '下半年',
        type: 'bar',
        barWidth: '30%',
        label: label,
        data: secondHalfData
      }]
    }
    chart.setOption(option)
  }

  function drawAgencyIllegalChart(chart, data) {
    var colors = [
      { color: '#1085C0', borderColor: '#03CEF9', borderWidth: 1},
      { color: 'rgba(74,114,255,0.6)', borderColor: '#4A72FF', borderWidth: 1},
      { color: 'rgba(232,118,222,0.5)', borderColor: '#F95FB6', borderWidth: 1},
      { color: 'rgba(248,231,28,0.6)', borderColor: '#F8E71C', borderWidth: 1},
      { color: 'rgba(55,201,54,0.6)', borderColor: '#37C936', borderWidth: 1},
      { color: 'rgba(0,255,255,0.6)', borderColor: '#00FFFF', borderWidth: 1},
    ]

    var seriseData = _.map(data, function(item, index) {
      return {
        name: item.name,
        value: item.value,
        itemStyle: {
          normal: colors[index]
        },
      }
    })
    var option = {
      tooltip: {
        trigger: 'item',
      },
      textStyle: {
        color: '#A0A1B4',
        fontSize: 16,
      },
      series: [{
        name: '访问来源',
        type: 'pie',
        radius: ['28%', '70%'],
        center: ['50%', '60%'],
        label: {
          normal: {
            formatter: '{b} \n {d}%',
          }
        },
        labelLine: {
          normal: {
            length: 20,
            length2: 30,
            lineStyle: {
              color: '#00FFFF'
            }
          },
        },
        data: seriseData
      }]
    }
    
    chart.setOption(option)
  }
})